<!DOCTYPE html>
<html layout:decorator="wechat/interaction/layout">
<head>
    <title>Task List</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- <meta name="_csrf" th:content="${_csrf.token}"/>
    default header name is X-CSRF-TOKEN
    <meta name="_csrf_header" content="${_csrf.headerName}"/> -->

</head>
<body>

<div layout:fragment="content">
	<div class="row">
		<div class="col-md-3">
			<div id="users" >
				<div th:fragment="users">
					
					<table class="table table-bordered">
						<thead>
							<tr>														
								<th>关注用户</th>
							</tr>
						</thead>
						<tbody>
							<th:block th:each="user : ${userList}">	      		
					      		<tr>
									<td th:onclick="${ 'selectUser('''+user.openid+''','''+user.nickname+''')'}"><span th:text="${user.nickname}">Center aligned text.</span><span class="badge" th:text="${user.num}" th:id="${user.openid}">42</span></td>
								</tr>
					      	</th:block>								
						</tbody>
					</table>		
			      	
			    </div>
			</div>
		</div>	
		<div id="messages_div" class="col-md-9 hidden" role="main" >
			<div id="userNickName" class="page-header" style="margin: 20px 0;"></div>
			<div id="messages" style="padding:10px;">
			 	<div th:fragment="messages">
					<th:block th:each="message : ${messages}">	
										
						<div th:switch="${message.msgType}">			
							<div th:case="'text'">		
								<div th:switch="${message.fromUserName}">
									<div th:case="'self'">
										<div th:text="${message.createTime} " class="text-right"></div>											
										<div th:text="${message.content}" class="alert alert-success text-right">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
									</div>
									<div th:case="*">
										<div th:text="${message.createTime} "></div>											
										<div th:text="${message.content}" class="alert alert-info">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
									</div>
								</div>	
							</div>
			      		</div>					      		  					      		
			      	</th:block>
			      	<div style="height:60px"></div>
			    </div>	
			</div>   
			<div style="margin-top:10px;">
		      	<form name="sendMessageForm" id="sendMessageForm" th:action="@{'wechat/interaction/sendMessage'}">		
					<div class="input-group">
						<input type="hidden" id="openid" name="openid" value=""/>
						<input class="form-control" type="text" name="message"/>
						<span class="input-group-btn">
							<button type="button" class="btn btn-default" id="sendMessageButton">发送</button>
						</span>
					</div>      
		      	</form>				
			</div>
			<div id="status" class="hidden">
			  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
			  <div id="statusAlert"></div>
			</div>
		</div>
	</div>
	
<script type="text/javascript">
	var openid="";
	var first=1;

	var scrollLast=1;
	function getUsers(){
		var options = {
	            url: '/wechat/wechat/interaction/user',
	            type: 'get',	           
	            dataType: 'html',
	            success: function (data) {
	                if (data.length > 0){
	                    $("#users").html(data);
	                    userResetDiv();
	                }
	            }
	        };
		
		$.ajax(options);
	}
	
	function getMessages(){
		var options = {
	            url: '/wechat/wechat/interaction/message/'+openid,
	            type: 'get',	           
	            dataType: 'html',
	            success: function (data) {
	                if (data.length > 0){
	                    $("#messages").html(data);
	                    messageResetDiv();
	                }
	                if(scrollLast==1){
	            		try{
	                		messages.scrollTop = messages.scrollHeight;
	            		}catch(e){
	            			
	            		}
	                }
	                scrollLast=2;	                
	            }
	        };
		//if($("#"+openid).html()>0 ){			
			$.ajax(options);			
		//}
	}	
	
	function selectUser(oid,nickname){
		openid=oid;		
		$("#userNickName").html(nickname);
		$("#openid").attr("value",oid);
		getMessages();
		scrollLast=1;
		if(first==1){
			$("#messages_div").removeClass("hidden");
			setInterval("getMessages()",2000);
			first=2;	
		}
	}
	
	
	$("#sendMessageButton").click(function(){
		var options = {
	            url: '/wechat/wechat/interaction/sendMessage',
	            type: 'post',	 	           
	            dataType: 'text',     
	            data: $("#sendMessageForm").serialize(),
	            success: function (data) {
	                if ("ok"==data){
	                	$("#status").attr("class","alert alert-success alert-dismissable");
	                	try{
	                		messages.scrollTop = messages.scrollHeight;
	            		}catch(e){
	            			
	            		}
	                	$("#statusAlert").html("发送成功");
	                }else{
	                	$("#status").attr("class","alert alert-danger alert-dismissable");
	                	$("#statusAlert").html("发送失败");
	                }                	
	            },
	            error:function(XMLHttpRequest, textStatus, errorThrown) { 
	            	$("#status").attr("class","alert alert-danger");
                	$("#status").html("Status: " + textStatus + "     Error: " + errorThrown);
                }       
	        };		
		$.ajax(options);
	});
	
	function userResetDiv(){
		// 浏览器的高度和div的高度
		var height = $(window).height(); 		
		//获取div对象
		var divh = $("#users").get(0);		
		//div高度大于屏幕高度把屏幕高度赋给div，并出现滚动条
		//foot 150
		divh.style.height = (height-100)+"px";
		divh.style.overflow = "auto";

	}
	
	function messageResetDiv(){
		// 浏览器的高度和div的高度
		var height = $(window).height(); 
		
		//获取div对象
		var divh = $("#messages").get(0);
		//foot 150
		//div高度大于屏幕高度把屏幕高度赋给div，并出现滚动条
		divh.style.height = (height-260)+"px";
		divh.style.overflow = "auto";		
	}
	
	$(document).ready(function () {
		setInterval("getUsers()",5000);	
		userResetDiv();
		messageResetDiv();
	});  
</script>
</div>



</body>
</html>